<template>
  <div>
    <el-input
        prefix-icon="el-icon-search"
        placeholder="输入部门名称进行查询"
        v-model="filterText">
    </el-input>

    <el-tree
        default-expand-all
        :data="deps"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        ref="tree">
      <span class="custom-tree-node" style="display: flex;justify-content: space-between;width: 100%"
            slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
              type="text"
              size="mini"
              @click="() => append(data)">
            添加部门
          </el-button>
          <el-button
              type="text"
              size="mini"
              style="color: red"
              @click="() => remove(node, data)">
            删除部门
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog
        title="添加部门"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <table>
          <tr>
            <td>
              <el-tag>上级部门</el-tag>
            </td>
            <td>
              {{ pname }}
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>部门名称</el-tag>
            </td>
            <td>
              <el-input v-model="dep.name" placeholder="输入部门名称"></el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addDep">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DepMana",
  mounted() {
    this.initDeps()
  },
  methods: {
    append(data) {
      this.pname = data.name
      this.dep.parentId = data.id
      this.dialogVisible = true
    },
    addDep() {
      this.postRequest(this.api.department, this.dep).then(res => {
        if (res) {
          this.addDepToDeps(this.deps,res.data.obj)
          this.initDep()
          this.dialogVisible = false
        }
      })
    },
    remove(node, data) {
      this.commonUtil.oneConfirmDialog(data.name,() => {
        this.deleteRequest(this.api.department + data.id).then(res => {
          if (res) {
            this.removeDep(this.deps,data.id)
          }
        })
      },"部门")
    },
    initDeps() {
      this.getRequest(this.api.department).then(res => {
        this.deps = res.data
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    initDep() {
      this.pname = ""
      this.dep = {
        name: "",
        parentId: -1
      }

    },
    addDepToDeps(deps, obj) {
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i]
        if (d.id == obj.parentId){
          obj.children=[]
          d.children = d.children.concat(obj)
          return;
        }else {
          this.addDepToDeps(d.children,obj)
        }
      }
    },
    removeDep(deps, id) {
      for (let i = 0; i < deps.length; i++) {
        let d = deps[i]
        if (d.id == id){
          deps.splice(i,1)
          return;
        }else {
          this.removeDep(d.children,id)
        }
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      pname: "",
      dep: {
        name: "",
        parentId: -1
      },
      dialogVisible: false,
      filterText: "",
      deps: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
}
</script>

<style scoped>

</style>